<template>
  <view v-show="i === index">
    <mescroll-body :ref="'mescrollRef'+i"  :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick">
      <view style="padding: 0 30rpx;">
        <CourseItem v-for="i in courseListSize" :key="i" />
      </view>
    </mescroll-body>
  </view>
</template>

<script>
  import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"
  import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js"
  import CourseItem from '@/components/course-item'
  export default {
    mixins: [MescrollMixin,MescrollMoreItemMixin],
    props: {
      // 当前组件的在search 页面中 列表组件的位置
      i: Number,
      // 当前是点击的哪个tab页面，如果这个值 和 i 的值相等，就显示这个组件
      index: {
        type: Number,
        default: 0
      },
      // 搜索参数
      params: {
        type: Object,
        default: () => ({})
      },
      // 关键字
      content: {
        type: String,
        default: null
      }
    },
    components: {
      CourseItem
    },
    data() {
      return {
        // 课程列表
        courseListSize: 0,
        downOption:{
        	auto:false // 不自动加载 (mixin已处理第一个tab触发downCallback)
        },
        upOption:{
        	auto:false, // 不自动加载
        	page: {
        		num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
        		size: 8 // 每页数据的数量
        	},
        	noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
        	empty:{
        		tip: '~ 空空如也 ~', // 提示
        		btnText: '去看看'
        	}
        },
      }
    },
    created() {
      console.log('课程列表加载', this.i === this.index )
    },
    methods: {
      /**
       * 其他页面调用或切换查询条件时 调用的方法
       * @param {Object} data
       */
      search(data = {}) {
        // console.log(this.mescroll)
        this.mescroll.resetUpScroll()
      },
      /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
      async upCallback(page) {
      	console.log('当前页面参数，page：' + page.num + ' , size：' + page.size)
        if (page.num === 1) {
          this.courseListSizeSize = 0
          this.mescroll.scrollTo(0, 0)
        }
        this.courseListSize += 8
        this.mescroll.endSuccess(true); 
      },
      //点击空布局按钮的回调
      emptyClick(){
      	uni.showToast({
      		title:'点击了按钮,具体逻辑自行实现'
      	})
      }
    },
    // watch: {
    //   content: {
    //     handler(val) {
    //       console.log(val)
    //       this.search()
    //     },
    //     immediate: true
    //   }
    // }
  }
</script>

<style>
</style>
